<template>
  <div class="consultant-list-container">
    <h2 class="section-title">咨询师信息</h2>
    <el-table :data="consultantList" style="width: 100%" border stripe highlight-current-row>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" align="center"></el-table-column>
      <el-table-column label="性别" prop="gender" align="center">
        <template #default="scope">
          {{ scope.row.gender === 'Male' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="openAppointmentDialog(scope.row)">预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 预约对话框 -->
    <el-dialog v-model="appointmentDialogVisible" title="预约咨询师" width="400px">
      <el-form :model="appointmentForm" label-width="100px">
        <el-form-item label="咨询师">
          <el-input v-model="appointmentForm.consultantName" disabled></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
            v-model="appointmentForm.appointmentTime"
            type="datetime"
            placeholder="选择预约时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%;"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="appointmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAppointment">确定预约</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';
import { useUserInfoStore } from '@/stores/userInfo';

const consultantList = ref([]);
const appointmentDialogVisible = ref(false);
const appointmentForm = ref({
  consultantId: '',
  consultantName: '',
  appointmentTime: ''
});
const userInfoStore = useUserInfoStore();

onMounted(() => {
  getConsultantList();
});

const getConsultantList = async () => {
  const res = await request.get('/api/consultant/list.do');
  consultantList.value = res.data || [];
};

const openAppointmentDialog = (consultant) => {
  appointmentForm.value = {
    consultantId: consultant.id,
    consultantName: consultant.username,
    appointmentTime: ''
  };
  appointmentDialogVisible.value = true;
};

const submitAppointment = async () => {
  if (!appointmentForm.value.appointmentTime) {
    ElMessage.error('请选择预约时间');
    return;
  }
  const params = new URLSearchParams();
  params.append('userId', userInfoStore.userInfo.id);
  params.append('consultantId', appointmentForm.value.consultantId);
  params.append('appointmentTime', appointmentForm.value.appointmentTime);
  const res = await request.post('/api/appointment/insert.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.code === 200) {
    ElMessage.success('预约成功');
    appointmentDialogVisible.value = false;
  } else {
    ElMessage.error(res.message || '预约失败');
  }
};
</script>

<style scoped>
.consultant-list-container {
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  padding: 32px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
</style>